<template>
  <div class="app-container">
    <el-card>
      <el-form ref="searchForm" :model="searchForm" size="mini" :inline="true">
        <el-form-item v-for="formItem in formItem" :key="formItem.dataIndex" :label="formItem.title"
          :prop="formItem.dataIndex">
          <el-select v-if="formItem.valueType == 'select'" v-model="searchForm[formItem.dataIndex]"
            :placeholder="formItem.placeholder">
            <el-option v-for="optionItem in formItem.options" :key="optionItem.value" :label="optionItem.label"
              :value="optionItem.value" />
          </el-select>
          <el-input v-else maxlength="200" clearable v-model="searchForm[formItem.dataIndex]" />
        </el-form-item>

        <el-form-item label="注册时间">
          <el-date-picker :picker-options="$pickerDateOptions" v-model="searchForm.beginTime" align="right" type="date" placeholder="选择开始日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>

        <el-form-item style="display: inline-block">
          <el-date-picker :picker-options="$pickerDateOptions" v-model="searchForm.endTime" align="right" type="date" placeholder="选择结束日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="searchForm.phone" maxlength="200" clearable placeholder="请输入手机号" />
        </el-form-item>

        <el-button size="small" icon="el-icon-refresh" @click="resetList">重置</el-button>
        <el-button size="small" icon="el-icon-search" type="primary" @click="getDateSource">查询</el-button>
      </el-form>
      <el-button size="mini" style="width: 100px" icon="el-icon-download" type="primary"
        @click="exportData">导出</el-button>
      <div>
        <el-table :data="tableData" size="mini" :default-sort="{ prop: 'date', order: 'descending' }"
          style="margin-top: 20px" v-loading="listLoading" border>
          <el-table-column label="编号" width="100" align="center" type="index"></el-table-column>

          <el-table-column v-for="formItem in formItem" :key="formItem.dataIndex" align="center" :label="formItem.title"
            :prop="formItem.dataIndex" />
          <el-table-column label="手机号码" align="center">
            <template slot-scope="scope">
              <div style="
                  display: flex;
                  align-items: center;
                  cursor: pointer;
                  justify-content: center;
                " @click="openEye(scope.$index, scope.row)">
                <span style="margin-right: 5px">
                  {{
                    scope.row.checkPhone
                      ? scope.row.phoneNumber
                      : scope.row.phone
                  }}
                </span>
                <img style="width: 18px; height: 12px; line-height: 16px" :src="scope.row.checkPhone
                    ? require('@/assets/icon/eye.png')
                    : require('@/assets/icon/openEye.png')
                  " />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="viewDetail(scope.row)" size="small">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="pageRight" background @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :current-page="searchForm.pageNum"
          :page-size="searchForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
      <dialogDiy ref="dialogDiy" title="详情" style="" @handleClose="closeDialog">
        <div style="
            max-height: 70vh;
            overflow-y: auto;
            height: 800px;
            padding: 0 20px;
          ">
          <el-tabs v-model="activeName">
            <el-tab-pane v-if="!isQuestion" label="基本信息" name="first">
              <transition name="el-fade-in">
                <basic-info v-if="activeName == 'first'" :detailInfo="detailInfo"></basic-info>
              </transition>
            </el-tab-pane>
            <el-tab-pane v-if="type == 1 && !isQuestion" label="纳税信息" name="second">
              <transition name="el-fade-in">
                <tax-information v-if="activeName == 'second'" :detailInfo="detailInfo"></tax-information>
              </transition>
            </el-tab-pane>
            <el-tab-pane v-if="type == 1 && !isQuestion" label="开票信息" name="third">
              <transition name="el-fade-in">
                <invoice-information v-if="activeName == 'third'" :detailInfo="detailInfo"></invoice-information>
              </transition>
            </el-tab-pane>
            <el-tab-pane label="工商司法信息" name="four">
              <transition name="el-fade-in">
                <business-judicial-information v-if="activeName == 'four'"
                  :detailInfo="detailInfo"></business-judicial-information>
              </transition>
            </el-tab-pane>
          </el-tabs>
        </div>
      </dialogDiy>
      <el-dialog title="匹配主体" :visible.sync="dialogVisible" width="70%">
        <div class="mainContet">
          <el-table :data="enterpriseRecord" size="mini" :default-sort="{ prop: 'date', order: 'descending' }" border>
            <el-table-column label="序号" align="center" type="index" />
            <el-table-column label="公司名称" align="center" prop="taxpayerName" />
            <el-table-column label="税号" align="center" prop="creditCode" />
            <el-table-column label="法人" align="center" prop="legalPerson" />
            <el-table-column label="手机号" align="center" prop="phone">
            </el-table-column>
            <el-table-column label="操作" width="100" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="viewEnterpriseDetail(scope.row)" size="small">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination class="pageRight" background @size-change="handleEnterpriseSizeChange"
            @current-change="handleEnterpriseCurrentChange" :page-sizes="[10, 20, 30, 40]"
            :current-page="enterpriseRecordParams.pageNum" :page-size="enterpriseRecordParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="enterpriseRecordTotal">
          </el-pagination>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import dialogDiy from "@/components/dialogDiy/index.vue";
import creditInformation from "./components/creditInformation.vue";
import businessJudicialInformation from "./components/businessJudicialInformation.vue";
import taxInformation from "./components/taxInformation.vue";
import invoiceInformation from "./components/invoiceInformation.vue";
import { getProvinceList } from "@/api/tax";
import { getMemberList, getMemberEnterprise } from "@/api/customer";
import basicInfo from "./components/basicInfo.vue";
import { saveAs } from "file-saver";
import axios from "axios";
import { timeFun } from "@/utils/date";
import { getToken } from "@/utils/auth";
import { getNowTime } from "@/utils/date";
import { getMemberRealInfo } from "@/api/member";
const baseURL = process.env.BASE_API;

export default {
  components: {
    dialogDiy,
    creditInformation,
    businessJudicialInformation,
    taxInformation,
    basicInfo,
    invoiceInformation,
  },
  data() {
    return {
      dialogVisible: false,
      sourceTypeEnum: {
        ["1"]: "微信公众号",
        ["2"]: "微信小程序",
        ["6"]: "安卓",
        ["7"]: "IOS",
        ["9"]: "抖音小程序",
      },
      searchForm: {
        origin: "",
        platform: "",
        type: "",
        nickName: "",
        province: "",
        phone: "",
        jl: "",
        registerTime: "",
        companyName: "",
        pageNum: 1,
        pageSize: 10,
      },
      radio4: "",
      type: 1,
      total: 0,
      isQuestion: false,
      formItem: [
        {
          title: "平台",
          dataIndex: "app",
          valueType: "select",
          options: [
            {
              label: "顺顺助融",
              value: "SmoothCFF",
            },
            {
              label: "助融报告",
              value: "ReportCFF",
            },
          ],
        },
        { title: "来源渠道", dataIndex: "channelName" },
        {
          title: "用户类型",
          valueType: "select",
          dataIndex: "type",
          options: [
            {
              label: "访客",
              value: 0,
            },
            {
              label: "用户",
              value: 1,
            },
          ],
        },
        {
          title: "会员昵称",
          dataIndex: "nickname",
        },

        {
          title: "所属省份",
          dataIndex: "location",
          valueType: "select",
        },
      ],
      tableData: [],
      detailInfo: "",
      activeName: "first",
      listLoading: false,

      enterpriseRecordParams: {
        pageNum: 1,
        pageSize: 10,
      },
      enterpriseRecord: [],
      enterpriseRecordTotal: 0,
    };
  },
  created() {
    this.getProvinceData();
    this.getDateSource();
  },
  methods: {
    openEye(idx, v) {
      if (v.type == 1) return
      if (v.checkPhone) return (this.tableData[idx].checkPhone = false);
      let params = {
        id: v.memberId,
        type: "phone",
      };
      getMemberRealInfo(params).then((res) => {
        if (res.data) {
          this.tableData[idx].checkPhone = true;
          this.tableData[idx].phoneNumber = res.data;
        }
      });
    },
    exportData() {
      let str = "用户行为分析" + "-" + getNowTime() + ".xlsx";
      const Burl = baseURL + "/statistics/member/export";
      axios({
        method: "get",
        url: Burl,
        params: this.searchForm,
        responseType: "blob",
        headers: { Authorization: getToken() },
      }).then((res) => {
        const blob = new Blob([res.data]);
        saveAs(blob, str);
      });
    },
    async viewDetail(data) {
      this.enterpriseRecordParams.memberId = data.memberId;
      this.getEnterpriseRecord();
    },

    async getEnterpriseRecord() {
      let res = await getMemberEnterprise(this.enterpriseRecordParams);
      this.enterpriseRecord = res.data.list;
      this.enterpriseRecordTotal = res.data.total;
      this.dialogVisible = true;
    },
    async viewEnterpriseDetail(data) {
      this.detailInfo = data;
      console.log(this.detailInfo);

      this.$nextTick(() => {
        if (this.isQuestion) {
          this.activeName = "four";
        }
        this.$refs.dialogDiy.openlog();
      });
    },
    closeDialog() {
      // this.detailInfo = {};
    },
    resetList() {
      this.searchForm = {
        pageNum: 1,
        pageSize: 10,
      };
      this.getDateSource();
    },
    async getProvinceData() {
      const res = await getProvinceList();
      res.data.forEach((element) => {
        element.label = element.name;
        element.value = element.name;
      });
      this.formItem = this.formItem.map((item) => {
        if (item.dataIndex == "location") {
          item.options = res.data;
        }
        return item;
      });
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getDateSource();
    },
    handleEnterpriseSizeChange(val) {
      this.enterpriseRecordParams.pageSize = val;
      this.getEnterpriseRecord();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getDateSource();
    },
    handleEnterpriseCurrentChange(val) {
      this.enterpriseRecordParams.pageNum = val;
      this.getEnterpriseRecord();
    },
    async getDateSource() {
      let parmas = this.searchForm;
      if (
        (this.searchForm.beginTime && !this.searchForm.endTime) ||
        (!this.searchForm.beginTime && this.searchForm.endTime)
      ) {
        return this.$message.warning("请填写开始日期或者结束日期哦");
      }
      if (this.searchForm.beginTime && this.searchForm.endTime) {
        if (!timeFun(this.searchForm.beginTime, this.searchForm.endTime)) {
          return this.$message.warning("结束时间必须大于开始时间");
        }
      }

      let res = await getMemberList(parmas);
      this.tableData = res.data.list.map((item) => {
        item.type = item.type == 1 ? "用户" : "访客";
        item.app = item.app == "SmoothCFF" ? "顺顺助融" : "助融报告";
        item.sourceType = this.sourceTypeEnum[item.sourceType];
        item.checkPhone = false;
        item.phoneNumber = "";
        return item;
      });
      this.total = res.data.total;
    },
  },
};
</script>

<style lang="scss" scoped>
.tableBox {}
</style>
